import React from 'react';
import ReactDom from 'react-dom';
import './pub.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';
import playerStore from 'js/store/playerStore';
import iconData from 'js/data/iconData';

class Team extends React.Component {
    constructor() {
        super()
        this.state = {
            selectId: null,
            selectBattleIndex: 0,
            selectPartner: null
        }
    }
    battleSelect = (partner, index) => {
        if (partner) {
            this.setState({ selectId: partner.indexId, selectPartner: partner, selectBattleIndex: index })
        } else {
            this.setState({ selectBattleIndex: index })
        }
    }
    select = (indexId, partner) => {
        this.setState({ selectId: indexId, selectPartner: partner })
    }
    partnerBattle = (indexId) => {
        api('partnerBattle', { indexId: indexId, battleIndex: this.state.selectBattleIndex }, () => {
            this.setState({})
        });
    }
    partnerRest = (indexId) => {
        api('partnerRest', { indexId: indexId }, () => {
            this.setState({})
        });
    }
    render() {
        let { selectId, selectPartner, selectBattleIndex } = this.state;
        let player = playerStore.player;
        let battleTeams = player.battleTeams;
        let partnerTeams = player.partnerTeams;
        let battleNode = [], restNode = [], infoNode;
        let battlePosText = { 0: '前排', 1: '中间', 2: '后排' }
        for (let i = 0; i < 3; i++) {
            let item = battleTeams[i];
            if (item) {
                battleNode.push(<div className={"item flex" + (selectId === item.indexId ? ' active' : '') + (selectBattleIndex === i ? ' battle-active' : '')} >
                    <div className="pos-name">{battlePosText[i]}</div>
                    <div className="name" key={i} onClick={() => { this.battleSelect(item, i) }}>
                        {item.name}
                    </div>
                </div>)
            } else {
                battleNode.push(
                    <div className={"item flex" + (selectBattleIndex === i ? ' battle-active' : '')}>
                        <div className="pos-name">{battlePosText[i]}</div>
                        <div className="name" key={i} onClick={() => { this.battleSelect(item, i) }}></div>
                    </div>)
            }
        }
        for (let i = 0; i < 6; i++) {

            let item = partnerTeams[i];
            if (item) {
                restNode.push(<div className={"item rest-item flex-center" + (selectId === item.indexId ? ' active' : '')} key={i} onClick={() => { this.select(item.indexId, item) }}>
                    <div className={"icon fonts-" + iconData[item.templateId]}></div>{item.name}
                </div>)
            } else {
                restNode.push(<div className="item" key={i}></div>)
            }

        }
        if (selectPartner) {
            infoNode = <div className="info flex-col">
                <div className="name">{selectPartner.name}</div>
                <div className="flex-g-1"></div>
                <div className="handle flex jc-around">
                    {selectPartner.status === 1 ? <Button onClick={() => { this.partnerBattle(selectPartner.indexId) }}>出战</Button> :
                        <Button onClick={() => { this.partnerRest(selectPartner.indexId) }}>休息</Button>}
                </div>
            </div>
        }
        return <div className="pub-team">
            <div className="team-desc">你可以通过拖动来调整你的队伍的战斗位置,你还可以支付一定的费用来治疗或者你的冒险伙伴</div>
            <div className="flex">
                <div className="rest-list">
                    <div className="list-head">休息中的冒险者</div>
                    {restNode}
                </div>
                <div>
                    <div className="battle-list">
                        <div className="list-head">冒险队伍</div>
                        {battleNode[0]}
                        {battleNode[1]}
                        {battleNode[2]}
                    </div>
                    {infoNode}
                </div>
            </div>
        </div>
    }
}

class RecruitComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            selectPartnerId: null
        }
    }
    select = (partnerId) => {
        this.setState({ selectPartnerId: partnerId })
    }
    recruit = (partnerId) => {
        api('partnerRecruit', { partnerId: parseInt(partnerId) }, () => {
            this.setState({})
        });
    }
    render() {
        let { selectPartnerId } = this.state;
        let partnerConfig = window.totalConfig.partner;
        let listNode = [], infoNode;
        for (let [partnerId, value] of Object.entries(partnerConfig)) {
            listNode.push(<div className={"item flex-center " + (selectPartnerId === partnerId ? 'active' : '')} key={partnerId} onClick={() => { this.select(partnerId) }}>
                <div className={"icon fonts-" + iconData[partnerId]}></div>
                {/* <div className="name">{propName[partnerId]}</div> */}
            </div>)
        }

        if (selectPartnerId) {
            infoNode = <div className="info flex-col">
                <div className="name">职业:{propName[selectPartnerId]}</div>
                <div className="flex-g-1"></div>
                <div className="handle" onClick={() => { this.recruit(selectPartnerId) }}>
                    招募
                </div>
            </div>
        }
        return <div className="pub-body">

            <div className="pub-content">
                <div className="flex">
                    <div className="list">
                        {listNode}
                    </div>
                    {infoNode}
                </div>
            </div>
        </div>
    }
}

class PubBossComponent extends React.Component {
    constructor() {
        super()
        this.state = {
            selectPartnerId: null
        }
    }
    render() {
        return <div className="pub-boss-body">
            <div className="boss-name">酒馆老板</div>
            <div className="boss-desc">快来看看啊!!!这里每天都有丰富报酬的任务等着你.</div>
        </div>
    }
}


class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            showType: 1
        }
    }
    componentDidMount() {
    }
    close = () => {
        this.props.close();
    }
    render() {
        let { showType } = this.state;
        let node;
        if (showType === 1) {
            node = <RecruitComponent />
        } else if (showType === 2) {
            node = <Team />
        } else if (showType === 3) {
            node = <PubBossComponent />
        }
        return <div id="pub" className="flex-col">
            <div className="head">酒馆</div>
            <div className="desc">这里是冒险者的聚集地.冒险者们在这里休息调整,交流他们的冒险经验.</div>
            <div className="flex-g-1"> {node}</div >
            <div className="menu flex">
                <div className={"bag menu-item flex-center" + (showType === 1 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 1 }) }}>
                    <div>招募冒险者</div>
                </div>
                <div className={"team menu-item flex-center" + (showType === 2 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 2 }) }}>
                    <div>冒险队伍管理</div>
                </div>
                <div className={"team menu-item flex-center" + (showType === 3 ? ' menuActive' : '')} onClick={() => { this.setState({ showType: 3 }) }}>
                    <div>酒馆老板</div>
                </div>
                <div className="flex-g-1"></div>
                <div className="team menu-item flex-center" onClick={this.close}>
                    <div>离开</div>
                    <div className="fonts fonts-arrow-right2"></div>
                </div>
            </div>
        </div>
    }
}

export default Main;